<template>
    <el-container>
        <!--header-->
        <el-header>
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col>
                    <h1>作业列表</h1>
                </el-col>
                <el-col style="text-align: right;">
                    <el-button type="primary" @click="create">新增</el-button>
                    <!--<el-button @click="filterDialogVisible = true">筛选</el-button>-->
                </el-col>

            </el-row>
        </el-header>
        <el-container>
            <el-main>
                <el-table :data="works" stripe v-loading="loading" highlight-current-row>
                    <el-table-column prop="id" label="#" width="80"></el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column prop="question" label="题目"></el-table-column>
                    <!--<el-table-column prop="courses_count" label="课程数量"></el-table-column>-->

                    <el-table-column fixed="right" label="操作" width="350">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" size="small">编辑</el-button>

                            <el-button v-if="!scope.row.deleted_at" @click="destroy(scope.row)" type="danger"
                                       size="small">删除
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {

        data() {
            return {

                works: [],
                loading: true,

            }
        },

        methods: {
            getWorksPromise() {
                return axios.get('courses/' + this.$route.params.course + '/works');
            },
            getWorks() {
                this.loading = true;
                this.getWorksPromise().then((response) => {
                    this.works = response.data.data;

                    this.loading = false;
                })
            }, create() {
                this.$router.push({name: 'work-create', params: {course:this.$route.params.course}});
            }, edit(row) {
                this.$router.push({name: 'work-edit', params: {work: row.id}});
            }, destroy(row) {
                this.$alert('此操作将删除作业【' + row.question + '】, 是否继续?').then(() => {
                    this.deletePromise(row).then(() => {
                        this.$message.success('删除成功!');
                        this.getWorks();
                    });
                });
            }, deletePromise(row) {
                return axios.delete('works/' + row.id);
            }
        },
        mounted() {
            this.getWorks();
        }
    }
</script>

<style scoped>

</style>